<template>
	<view class="content" v-if="titleBarHeight>0">





		<view class="header" :style="'height:'+titleBarHeight+'px;padding-top:'+statusBarHeight+'px'">
			<image src="https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/kaitsdi.png" class="btn"
				@click="goPath('/pages/subpage/search/search',18)"></image>
			<view class="header-title weight">哩咔 </view>
		</view>
		<!-- 邀请进厅弹窗 -->
		<view class="ccc">
			<Invite> </Invite>
		</view>
		<!-- banner -->
		<div :style="'margin-top: '+height+'px;'">
			<!-- 	<swiper v-if="banner!=''" class="swiper" :circular="circular" style="height:200upx;" :indicator-dots="true"
				indicator-color="rgba(255, 255, 255,0.6)" indicator-active-color="rgba(255, 255, 255,1)">
				<swiper-item v-for="(list,index) in banner" :key="index" @click="bannertz(list)">
					<view class="swiper-item uni-bg-red">
						<image style="width: 100%;height: auto;"
							:src="$global.getImageUrl(list.img,'https://ourydcimage.shenghua6.cn')" mode="widthFix">
						</image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 刷新是否被触发过 -->
			<!-- :refresher-triggered="triggered" -->
			<!-- 触发的阈值 -->
			<!-- :refresher-threshold="100" -->
			<!-- 设置自定义下拉刷新区域背景颜色 -->
			<!-- refresher-background="lightgreen" -->
			<!-- 自定义下拉刷新控件被下拉 -->
			<!-- @refresherpulling="onPulling" -->
			<!-- 自定义下拉刷新被触发 -->
			<!-- @refresherrefresh="onRefresh" -->
			<!-- 自定义下拉刷新被复位 -->
			<!-- @refresherrestore="onRestore" -->
			<!-- 自定义下拉刷新被中止 -->
			<!-- @refresherabort="onAbort" -->
			<!-- {{chatRoomList[0].managerHeadImg}} -->
			<!-- {{currentTab}} -->
			<view class="body-view">
				<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft" enable-flex="true">
					<block v-for="(menuTab,index) in chatRoomSortList" :key="index">
						<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
							<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
								<view class="menu-one-txt">{{menuTab.typeName}}</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<!-- 字数太长不支持的 自定义弹窗  -->
				<view class="tan" v-if="msgtype">
					<p class='chuang'>
						{{msg}}
					</p>
				</view>



				<swiper :current="currentTab" class="swiper-box-list" duration="250" @change="swiperChange">
					<!-- <block > -->
					<swiper-item v-for="(swiperDate,index1) in nav" :key="index1">
						<scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)"
							:refresher-threshold="45" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
							:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherabort="onAbort"
							refresher-enabled="true">
							<block v-if="chatRoomList.length>0">
								<div class="roomList">
									<ul class="roomListUl">
										<div @click="goPath('/pages/subpage/chatRoomDetails/chatRoomDetails?roomId='+chat.roomId+'&channelId='+chat.channelId+'&identityId='+chat.identityId+'&onLineUser='+chat.onLineUser,chat.isPrivate,chat.roomId)"
											style="width: 50%;float: left;display: flex;justify-content: center;"
											v-for="(chat,index2) in chatRoomList" :key="index2">
											<li>
												<span class="zxrs pa">
													<span class="greenR"></span>热度{{chat.onLineUser}}</span>



												<div class="roomId pa">

													<!-- 是否有pk 1有 2无 -->


													<image v-if="chat.isPKing==1 && chat.roomType==33"
														style="width:70upx;height:auto;margin-top: -160upx;margin-left:10upx;"
														src="https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/pk.png"
														mode="widthFix"></image>
													<div class="jianbian"
														style="   padding: 0 20upx;position: absolute;bottom: 0;height: 40upx;width:88%;display: flex;align-items: center;">
														<image v-if="chat.typeImage!=undefined"
															style="width: 44upx;height: 20upx;margin-right: 10upx;"
															:src="$global.getImageUrl(chat.typeImage,'https://ourydcimage.shenghua6.cn')">
														</image>

														<image v-if="chat.labelName!=undefined"
															style="width:60upx;height:20upx;"
															:src="$global.getImageUrl(chat.labelName,'https://ourydcimage.shenghua6.cn')"
															mode="aspectFit"></image>
														<view v-if="chat.labelName" style="width:10upx;">

														</view>

														<text
															:style="chat.labelName?'width:60%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:inline-block;':' width:90%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' ">{{chat.roomName}}</text>
													</div>



												</div>
												<p>

													<image class="img"
														:src="$global.getImageUrl(chat.managerHeadImg+'?x-oss-process=image/bright,15/resize,m_fill,h_200,w_200','https://ourydcimage.shenghua6.cn')">
													</image>
												</p>
											</li>
										</div>
									</ul>
								</div>
							</block>

							<!-- 判断是否列表为空，增加省图 -->
							<!-- v-if="chatRoomList.length==0" -->
							<view class="" v-if="currentTab > 0 &&chatRoomList.length==0&&tjpdtb==true ">
								<view class="iynst">
									<view style="width:50%;text-align: center; ">
										<image style="width: 100%;height: auto;"
											:src="$BASE_URL +'/st/mini/static/img/gender/ques.png'" mode="widthFix">
										</image>

										<view class="texhe">
											暂无主播开播哦~
										</view>
										<view style="height:10rpx;">

										</view>
										<view>
											稍等再来看看吧
										</view>
									</view>
								</view>
							</view>

							<!-- 判断是否列表为空，增加省图 -->
							<!-- v-if="chatRoomList.length==0" -->
							<!-- v-if="currentTab==0 && chatRoomList.length==0" -->
							<!-- 							// 关注缺省
							guanztb:false,
							
							// 推荐派对的缺省
							tjpdtb:false, -->
							<!--   currentTab： {{currentTab.length}}
       chatRoomList：{{chatRoomList.length}}
{{guanztb}} -->
							<!-- 	{{currentTab}}
							{{chatRoomList.length}}
							{{guanztb}}  -->
							<view class="iynst" v-if="currentTab==0 && chatRoomList.length==0 && guanztb == true">
								<view style="width:90%;text-align:center;">
									<image style="width:60%;height:auto;"
										:src="$BASE_URL +'/st/mini/static/img/gender/ques.png'" mode="widthFix">
									</image>

									<view>
										快去关注几个感兴趣的小伙伴吧~
									</view>

									<view style="height:20rpx;">
									</view>
									<view v-if="moren.length>0">
										<view class="tamz">
											TA们正在玩
										</view>
										<view style="height:10rpx;">
										</view>
										<view class="" style="display: flex;margin-left:-3%;">
											<view style="width:30%;margin-left:3%;" v-for="(item,index) in moren">
												<view class="icos">
													<image class="icoo"
														:src="$BASE_URL +'/st/mini/static/img/gender/weis.png'"
														mode="widthFix" v-if="item.roomType==0"
														@click="zuanzho(index,item.roomType)"></image>
													<image class="icoo"
														:src="$BASE_URL +'/st/mini/static/img/gender/xianzs.png'"
														mode="widthFix" v-if="item.roomType==27"
														@click="zuanzho(index,item.roomType)"></image>
												</view>

												<image style="width:100%;height: auto;border-radius:30upx;"
													:src="$global.getImageUrl(item.headImg+'?x-oss-process=image/bright,15/resize,m_fill,h_250,w_250','https://ourydcimage.shenghua6.cn')"
													mode="widthFix"></image>

												<view style="display: flex; align-items: center; ">
													<view style="width:3%;">

													</view>
													<image style="width:25%;height: auto;"
														:src="$BASE_URL +'/st/mini/static/img/gender/nvshens.png'"
														mode="widthFix"></image>

													<view style="width:3%;">

													</view>
													<view class="wwto">
														{{item.roomName}}
													</view>
												</view>
											</view>
										</view>
										<view style="height:30rpx;">
										</view>
										<view class="annius" v-if="guanz==true" @click="yijianguanz()">
											一键关注
										</view>

										<view class="anniuh" v-if="guanz==false" @click="huiseyjgz()">
											一键关注
										</view>
									</view>
								</view>
							</view>
							<!-- 	 一键关注
								 <image :src="$BASE_URL +'/st/mini/static/img/gender/guanzhus.png'" mode="widthFix"></image>
								 -->


							<!-- 	<view v-if="isAttention==2" style="text-align: center;line-height: 400upx;">
								快去关注几个感兴趣的小伙伴吧~</view> -->
						</scroll-view>
					</swiper-item>
					<!-- </block> -->
				</swiper>

			</view>
		</div>


		<u-popup v-model="wxLoginShow" mode="bottom" style="background: none">
			<view class="wxPop">
				<ul>
					<li class="li">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							微信一键登录
						</button>
					</li>
					<li class="li" @click="goPaths" style="margin-bottom: 0">
						手机验证码登录
					</li>
					<li class="li" @click="wxLoginShow = false" style="margin-bottom: 121upx; background-image: none">
						取消
					</li>
				</ul>
			</view>
		</u-popup>

		<!-- 	<u-popup v-model="shows" mode="center" length="65%" border-radius="15" :mask-close-able="false">
			<view style="text-align: center;width: 100%;margin-top: 25upx;">
				登录成功
			</view>
			<view style="font-size:24upx;color:#C0C0C0; width:90%;margin:-28upx auto;text-align:right;"
				@click="guanbi()">
				跳过
			</view>
			<view style="height:85rpx;">
			</view>
			<view style="font-size:23upx; text-align: center; color:#797979; ">
				快去完善你的头像、昵称、性别吧~
			</view>
			<view style="height:25rpx;">

			</view>
			<view style="font-size:23upx; text-align: center; color:#797979; ">
				完善资料会更受欢迎哦~
			</view>

			<view style="height:45rpx;">

			</view>

			<li class="li" style="width:60%;margin: 0 auto;">
				<button style="font-size:20upx;height: 70upx; line-height:70upx;" @click="wxGetUserInfo()">
					一键同步微信资料
				</button>
			</li>

			<view style="height:40rpx;">

			</view>


		</u-popup> -->



		<u-popup v-model="yaoqingtc" mode="center" :mask-close-able="false">

			<view class="xrbj">

				<!-- {{xinrenzhilsj}} -->
				<view class="title">
					{{xinrenzhilsj.title}}
					<!-- {{liwulist.length}} -->
				</view>
				<view style="height:55upx;">

				</view>
				<view class="tishis">
					<view style="width:470upx;">{{xinrenzhilsj.content}} </view>
				</view>

				<view class="jintian" style="margin-top: 25upx;">
					<view class="dijit">



						<text v-if="xinrenzhilsj.day==1"> 第一天 </text>
						<text v-if="xinrenzhilsj.day==2"> 第二天 </text>
						<text v-if="xinrenzhilsj.day==3"> 第三天 </text>
						<text v-if="xinrenzhilsj.day==4"> 第四天 </text>
						<text v-if="xinrenzhilsj.day==5"> 第五天 </text>
						<text v-if="xinrenzhilsj.day==6"> 第六天 </text>
						<text v-if="xinrenzhilsj.day==7"> 第七天 </text>
						<text v-if="xinrenzhilsj.day==8"> 第八天 </text>
						<text v-if="xinrenzhilsj.day==9"> 第九天 </text>
						<text v-if="xinrenzhilsj.day==10"> 第十天 </text>








					</view>
				</view>

				<view class="dvuy">
					<view class="narionglw">
						<!-- 一条礼物的时候 展示宽度百分之百 -->
						<!-- 两条礼物的时候 展示宽度百分之五十 -->
						<!-- 三条礼物的时候 展示宽度百分之三十三 -->



						<view class="liwu" v-for="(item,index) in liwulist" :style="'width: '+WIDTH+'%;'">
							<view class="liwutu">
								<view style="height:15upx;">

								</view>


								<image style="width: 80%"
									:src="$global.getImageUrl(item.image+'?x-oss-process=image/bright,15/resize,m_fill,h_150,w_150', 'https://ourydcimage.shenghua6.cn')"
									mode="widthFix">
								</image>
							</view>
							<view style="height:8upx;">

							</view>
							<view class="liwuname">
								{{item.name}}
							</view>
						</view>

					</view>

				</view>

				<view style="height:80upx;"></view>

				<view class="lingqu">

					<view class="lq" @click="lingqq">
						领取
					</view>
				</view>

				<view style="height:40upx;"></view>

			</view>

			<!-- <image style="width:650upx; height: auto; " src="https://php.zgsj1.com/upload_video/20211025/1f82ba0ed3d0ed6cd6db0de449fde468.png" mode="widthFix"></image> -->

		</u-popup>



	</view>
</template>

<script>
	import Vue from "vue";
	import SDK from "@/commons/NIM_Web_SDK_miniapp_v8.5.0.js";
	import {
		decrypt,
		CreateIM
	} from "@/commons/util.des.js";

	// 邀请进厅弹窗
	import Invite from '@/pages/components/Invite/Invite.vue'






	export default {
		components: {
			Invite
		},

		data() {
			return {



				WIDTH: 33,
				// 新人之旅弹窗
				yaoqingtc: false,
				// 新人之旅数据
				xinrenzhilsj: {},
				// 礼物列表
				liwulist: [],



				// 下载地址
				downloadUrl: '',

				// 关注缺省
				guanztb: false,
				// 推荐派对的缺省
				tjpdtb: false,
				guanz: true,
				// 默认关注列表三个
				moren: [],
				// 和导航条数一致
				nav: [{}, {}, {}, {}],
				// 默认的导航数据
				chatRoomSortList: [{
					typeName: '关注',
					roomType: "999",
					hasLiveRoom: 1
				}, {
					typeName: '推荐',
					roomType: "0",
					hasLiveRoom: 1
				}, {
					typeName: '派对',
					roomType: "1008",
					hasLiveRoom: 1
				}, {
					typeName: '直播',
					roomType: "33",
					hasLiveRoom: 1
				}],

				triggered: false,
				sex: 3,
				// 登录所需要的参数
				loginRes: "",
				encryptedData: "",
				iv: "",

				shows: false,
				wxLoginShow: false,
				// 自定义错误信息提示
				msg: '',
				msgtype: false,
				headImg: '',
				$BASE_URL: this.$BASE_URL,
				title: '你好，uniapp',
				// 导航栏文字
				nav_title: '我是导航栏',
				// 是否包含状态栏
				status_bar: true,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				circular: true,
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 1,
				// chatRoomSortList: [],
				chatRoomList: [],
				titleBarHeight: '',
				statusBarHeight: '',
				roomType: '',
				banner: [],
				height: 0,
				isLoadMore: false,
				page: 1,
				isAttention: 0,

				tapTime: 0, // 防止两次点击操作间隔太快

				tapTimes: 0 // 防止两次点击操作间隔太快

			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.currentTab = this.currentTab

			this.page = 1
			// this.chatRoomList = []
			// this.chatRoomSortList = []
			this.$nextTick(() => {
				this.getSwiper()
			})
		},
		onLoad(e) {

			console.log(e, "渠道")

			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// model设备型号
					// iOS
					// 标题栏高度
					if (res.model == 'iPhone') {
						that.titleBarHeight = 44
					} else {
						that.titleBarHeight = 48
					}
					// 状态栏高度
					that.statusBarHeight = res.statusBarHeight
					that.height = that.titleBarHeight + that.statusBarHeight
					console.log('设备专用参数', res)
					uni.setStorage({
						key: 'getSystemInfo',
						data: res,
						success: function() {
							console.log('success');
						}
					})

				}
			});







			// 	// 获取设备信息自适应
			// 	var res = uni.getStorageSync("getSystemInfo")
			// 	// model设备型号
			// 	// iOS
			// 	// 标题栏高度
			// if (res.model=='iPhone') {
			// 	this.titleBarHeight = 44
			// } else {
			// 	this.titleBarHeight = 48
			// }
			// 	// 状态栏高度
			// 	this.statusBarHeight = res.statusBarHeight
			// 	this.height = this.titleBarHeight + this.statusBarHeight



			this.$nextTick(() => {
				this.getSwiper()
			})

			var _this = this
			if (uni.getSystemInfoSync().platform == 'android') {
				setTimeout(() => {
					_this.getAppDownloadUrl('android')
				}, 1000)
			} else {
				setTimeout(() => {
					_this.getAppDownloadUrl('ios')
				}, 1000)
			}
			// 调用埋点
			this.maidainsj();
			// 底部按钮埋点
			this.dibuannmd();
		},



		onUnload() {
			// 移除监听事件  
			uni.$off('dkjt');
		},


		onShow(options) {


			uni.login({
				provider: "weixin",
				success: (loginRes) => {
					console.log(loginRes, "weixinweixinweixinweixinweixinweixin");
				
					this.loginRes = loginRes.code;
				},
				fail: () => {
					uni.showToast({
						title: "获取 code 失败",
						icon: "none",
					});
				},
			});


			// 获取默认关注三个主播
			this.morenguanzh()
			// this.currentTab = 1
			this.page = 1
			// this.chatRoomList = []
			this.getSwiper()

			var cookie = uni.getStorageSync("nei")
			console.log('判断有无登录', cookie)




			var _this = this

			if (cookie) {

				console.log("cookie执行nei", cookie)

				setTimeout(function() {
					_this.chaxunsxin()
				}, 600);

			}



			uni.login({
				provider: "weixin",
				success: (loginRes) => {
					console.log(loginRes);
					
					this.loginRes = loginRes.code;
				},
				fail: () => {
					uni.showToast({
						title: "获取 code 失败",
						icon: "none",
					});
				},
			});
		},
		methods: {












			// 判断 每日推荐分享 
			chaxunsxin() {


				var _this = this
				var data = {
					url: '/web/v2/api/config/serviceShareMore',
					methods: 'post',
					data: {
						apiVersion: '3.3'

					}
				}
				this.$http(data).then(res => {


					console.log('是否打开新人之旅', res)
					if (res.data.code == 21000) {

						// hasNewPackageDraw 等于 1 的时候 展示
						// 正式的是判断1
						//  
						// 打开新人之旅弹窗
						_this.xinrenzhilv()

						// 	_this.yaoqingtc = true

						//  
						if (res.data.data.hasNewPackageDraw == 1) {
							setTimeout(function() {

								if (_this.liwulist.length > 1) {
									_this.yaoqingtc = true
								}
							}, 500);
						}

					} else { //接口请求失败的处理

					}
				})
			},

			// 新人之旅
			xinrenzhilv: function() {
				console.log('新人之旅请求')

				var _this = this
				var data = {
					url: '/web/v2/api/app/showNewPackage',
					methods: 'post',
					data: {
						apiVersion: '3.3'
						// userId:this.userId,
						// toUserId: this.gerezilial.userId
					}
				}
				console.log('新人之旅开始请求 data', data)
				this.$http(data).then(res => {

					console.log('新人之旅请求返回结果', res)

					if (res.data.code == 21000) {


						console.log('新人之旅请求成功后', res)
						_this.xinrenzhilsj = res.data.data
						console.log(_this.xinrenzhilsj, 666666666666666666666666666666666666)

						_this.liwulist = res.data.data.rewardList
						// <!-- 一条礼物的时候 展示宽度百分之百 -->
						// <!-- 两条礼物的时候 展示宽度百分之五十 -->
						// <!-- 三条礼物的时候 展示宽度百分之三十三 -->

						var length = res.data.data.rewardList.length

						if (length == 1) {

							_this.WIDTH = 100;
						} else if (length == 2) {
							_this.WIDTH = 50;

						} else if (length == 4) {
							_this.WIDTH = 50;

						} else {
							_this.WIDTH = 33;
						}



					} else { //接口请求失败的处理

						// 接口错误的话,不弹窗


					}
				})

			},



			// 礼物领取新人之旅领取：

			lingqq: function() {
				console.log('领取礼物')


				var rs = this.fangdou()
				if (!rs) {
					return
				}


				var _this = this
				this.yaoqingtc = false;



				var data = {
					url: '/web/v2/api/app/receiveNewPackage',
					methods: 'post',
					data: {
						rewardId: this.xinrenzhilsj.rewardId
						// rewardId:2
					}
				}
				this.$http(data).then(res => {


					if (res.data.code == 21000) {
						uni.showToast({
							title: '领取奖励成功',
							icon: "none",
							duration: 2000,
						});

					} else {

						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						});

					}

				})

				// 房间id	
				// linkRoomId
				// 房间类型

				// 27  是女神厅
				//33   是个人直播

				var roomid = _this.xinrenzhilsj.linkRoomId

				var rid = _this.xinrenzhilsj.rewardId

			

				_this.jttyqq(roomid);


			},













			// 底部tab页面浏览
			// 底部按钮埋点
			dibuannmd: function() {

				// #ifdef  MP-WEIXIN
				// 	$预置属性		
				// is_no_authorization	是否授权	BOOL	
				// $is_first_time	是否首次	BOOL	
				// 	tab名称	STRING	交友tab/房间tab/消息tab/我tab
				getApp().sensors.track('BottomTabView', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					tab_name: '房间tab'
				})
				// #endif     
			},
			// 调用埋点
			maidainsj: function() {
				// #ifdef  MP-WEIXIN
				// 数据埋点
				// 顶部tab页面浏览埋点	$预置属性		
				// 	$is_first_time	是否首次	BOOL	
				// 	is_no_authorization	是否授权	BOOL	
				// 	tab_name	tab名称	STRING	关注聊天室/推荐聊天室/派对聊天室/直播聊天室/交友发现/交友附近的人/消息页消息/消息页关注/消息页粉丝/消息页好友
				// 	current_page	当前页面	STRING	房间/交友/消息

				var tab_name = this.chatRoomSortList[this.currentTab].typeName + "聊天室"
				var current_page = '房间';

				getApp().sensors.track('TopTabPageView', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					tab_name: tab_name,
					current_page: current_page,
				})
				// #endif 
			},


			// 下载弹窗
			downApp() {
				uni.showModal({
					title: '下载“哩咔”APP体验更多精彩内容',
					content: this.downloadUrl + '\n复制地址到浏览器下载',
					confirmText: "一键复制", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {
							this.copy(this.downloadUrl)
						} else {
							console.log('else', res)
						}
					}
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
						//以下就可自定义操作了~
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},




			// 下载地址
			getAppDownloadUrl(clientType) {
				var data = {
					url: '/web/v2/api/newApi/app/getAppDownloadUrl',
					methods: 'post',
					data: {
						clientType: uni.getStorageSync("qudao")
					}
				}
				this.$http(data).then(res => {
					this.downloadUrl = res.data.data.url
				})
			},



			// 滑动
			swiperChange: async function(e) {
				// var res = this.fangdou()
				// if (!res) {
				// 	return
				// }
				// 防止滑动频繁
				if (e.detail.source == 'touch') {
				} else {
					return
				}
				// 获取默认关注三个主播
				this.morenguanzh()
				// 关注缺省
				this.guanztb = false;
				// 推荐派对的缺省
				this.tjpdtb = false;
				console.log("触发滑动")
				let index = e.target.current;
				// this.setScrollLeft(index);
				this.currentTab = index;
				this.roomType = this.chatRoomSortList[index].roomType
				this.page = 1


				// this.chatRoomList = []
				this.getSwiper()
			},



			// 选中关注
			zuanzho: function(i, e) {
				console.log(i, '选中关注', e)
				if (e == 27) {
					this.moren[i].roomType = 0
				} else {

					this.moren[i].roomType = 27
				}


				// 这里这里

				var arr = this.moren;
				//  方法1：利用对象访问属性的方法，判断对象中是否存在key
				var result = [];
				var obj = {};

				for (var i = 0; i < arr.length; i++) {
					if (!obj[arr[i].roomType]) {
						result.push(arr[i]);
						obj[arr[i].roomType] = true;
					}
				}

				console.log(result, '3636');


				if (result.length == 1) {
					if (result[0].roomType == 0) {
						this.guanz = false
					} else {
						this.guanz = true
					}

				} else {
					this.guanz = true
				}



				// console.log(arr)
				// if (arr.length == 3) {
				// 	this.guanz = false
				// } else {
				// 	this.guanz = true
				// }




			},


			// 灰色一键关注
			huiseyjgz: function() {

				uni.showToast({
					title: "未选中要关注的ta哦",
					icon: "none",
				});
				return

			},


			// 一键关注
			yijianguanz: function() {


				var rs = this.fangdou()
				if (!rs) {
					return
				}



				var cookie = uni.getStorageSync("cookie")
				console.log('判断有无登录', cookie)

				if (!cookie) {
					// 吊起获取微信授权权限
					uni.reLaunch({
						url: '../login/wxlogin'
					})
					return
				}






				var arr = this.moren.filter(function(item) {
					return item.roomType == 27
				});

				var arr = ""
				for (var i = 0; i < this.moren.length; i++) {

					if (this.moren[i].roomType == 27) {

						if (i == 0) {
							arr = arr + this.moren[i].userId
						} else {
							arr = arr + '|' + this.moren[i].userId
						}
					}
				}

				if (arr == '') {

					uni.showToast({
						title: "未选中要关注的ta哦",
						icon: "none",
					});
					return
				}



				var data = {
					url: '/web/v2/api/user/batchAttentionUser',
					methods: "post",
					data: {
						toUserIds: arr,
						userId: uni.getStorageSync("userInfo").userId
					}
				}

				// 点击关注成功
				this.$http(data).then((res) => {
					console.log('关注成功', res)

					if (res.data.code == 21000) {
						uni.showToast({
							title: "关注成功",
							icon: "none",
						});
						this.page = 1
						this.roomType = 999
						this.getSwiper()
					}

				})



				console.log("一键关注")
				// 循环数组里边最少有一个选中状态
				// 然后触发关注
			},



			// 默认关注

			morenguanzh() {
				var data = {
					url: '/web/v2/api/newApi/follow/recommend',
					methods: "post",
					data: {

					}
				}
				this.$http(data).then((res) => {
					console.log(res, "默认关注")

					this.moren = res.data.data.recommendList
					this.guanz = true
				})
			},





			// 		<!-- 自定义下拉刷新控件被下拉 -->
			onPulling(e) {
				console.log("666666", e);
			},
			// 		<!-- 自定义下拉刷新被触发 -->
			onRefresh() {
				console.log('自定义下拉刷新被触发')
				var _this = this
				_this.page = 1
				_this.roomType = _this.chatRoomSortList[_this.currentTab].roomType


				var res = _this.fangdou();

				if (res) {
					// _this.chatRoomList = []
					_this.getSwiper()
				}


				_this.triggered = true;
				setTimeout(() => {
					_this.triggered = false;
					console.log('执行关闭')
				}, 1500)
			},
			// 		<!-- 自定义下拉刷新被复位 -->
			onRestore() {

				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			// 		<!-- 自定义下拉刷新被中止 -->
			onAbort() {
				console.log("onAbort");
			},


			// banner 跳转
			bannertz: function(e) {
				console.log(e.link_type)
				console.log(e)
				// e.link_type
				// 20=无操作;21=web;22=个人资料;23=抢宝宝活动页面;
				// 24=上传视频或图片;26=闪聊;27=指定聊天室;28=申请宝宝列表页面;
				// 30=全屏WEB;31=抢唱列表;32=动态话题详情页;
				//   * 33=闪聊;34=跳转多个聊天室的随机一个;
				//   35=跳转指定聊天室类型的聊天室;36=聊天室品类页;
				//   37=多个聊天室的权重配置;43=心动推荐;


				if (e.link_type == 27) {
					// 判断聊天室分类类型
					// chat.roomType==2||chat.roomType==7||chat.roomType==26||chat.roomType==27||chat.roomType==28||chat.roomType==1008
					// "/pages/subpage/chatRoomDetails/chatRoomDetails?roomId=104972572&channelId=ecbe5f4098f548b3bf97b383f5c80955&identityId=99883&onLineUser=2900"
					// goPath(url, isPrivate, roomId) 
					//goPath('/pages/subpage/chatRoomDetails/chatRoomDetails?roomId='+chat.roomId+'&channelId='+chat.channelId+'&identityId='+chat.identityId+'&onLineUser='+chat.onLineUser,chat.isPrivate,chat.roomId)"
					// 需要参数
					// channelId: "ecbe5f4098f548b3bf97b383f5c80955"
					// identityId: "99883"
					// onLineUser: "2900"
					// roomId: "104972572"
				}


			},


			// 关闭 授权信息的弹窗
			// guanbi: function() {
			// 	this.shows = false
			// },
			// xbsqkq: function() {
			// 	var rs = wx.getStorageSync("userInfo");
			// 	if (!rs) {
			// 		this.shows = true
			// 	}
			// 	console.log(rs, "人事")

			// },

			// if(!userInfo){
			// 	// uni.reLaunch({
			// 	// 	url: '../login/wxlogin',
			// 	// })
			// }

			// 关于登录的交互


			goPaths() {
				uni.navigateTo({
					url: "../login/login",
				});

				this.wxLoginShow = false
			},

			apiThirdLogin() {




				var data = {
					url: "/web/v2/api/app/apiThirdLoginEx",
					methods: "post",
					data: {
						type: "wx",
						account: this.loginRes,
						// projectId: "xcxlika",
						appletsEncryptedData: this.encryptedData,
						appletsIv: this.iv,
						sex: this.sex
					},
				};

				this.$http(data).then((res) => {
					console.log(res, "登录的返回")
					if (res.data.code == 21000) {
						this.wxLoginShow = false
						// uni.setStorage({
						// 	key: 'cookies',
						// 	data: res.cookies,
						// 	success: function() {
						// 		console.log('success');
						// 	}
						// });

						uni.setStorage({
							key: 'userInfo',
							data: res.data.data,
							success: function() {
								console.log('success');
							}
						});


						var cookie = res.header["Set-Cookie"];
						console.log(cookie, "cookiecookie3")
						if (cookie) {
							wx.setStorageSync("cookie", res.header["Set-Cookie"]); //服务器返回的Set-Cookie，保存到本地
						}





						CreateIM(res.data.data.userId, res.data.data.imPwd, res)
						return

						// return
						//  IM实例化
						Vue.prototype.$NIM = SDK.NIM.getInstance({
							appKey: "7ca5cef23fd00cb4774107175ab6d413",
							account: res.data.data.userId,
							token: decrypt(res.data.data.imPwd),
							onconnect: onConnect,
							ondisconnect: onDisconnect,

						});

						var nei = {
							appKey: "7ca5cef23fd00cb4774107175ab6d413",
							account: res.data.data.userId,
							token: decrypt(res.data.data.imPwd),

						}


						uni.setStorage({
							key: 'nei',
							data: nei,
							success: function() {
								console.log('success');
							}
						});

						function onConnect() {
							console.log("登录页=========================IM连接成功");

						}




						function onDisconnect(error) {
							// 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
							console.log("丢失连接");
							console.log(error);
							if (error) {
								switch (error.code) {
									// 账号或者密码错误, 请跳转到登录页面并提示错误
									case 302:
										break;
										// 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
									case 417:
										break;
										// 被踢, 请提示错误后跳转到登录页面
									case "kicked":
										console.log("kicked");

										if (error.reason == "samePlatformKick") {
											uni.showToast({
												title: "您的帐号在异地登陆",
												duration: 2000,
												icon: "none",
											});
											setTimeout(function() {
												//清除本地登录状态
												// uni.clearStorage();
												// 清除本地cookie
												uni.removeStorage({key: 'cookie'});
												//IM实例销毁
												Vue.prototype.$NIM.disconnect();

												//跳转登录页
												uni.redirectTo({
													url: "/pages/login/wxlogin",
												});
											}, 2000);
										}




										if (error.reason == "serverKick") {
											uni.showToast({
												title: "您的帐号已被封禁",
												duration: 2000,
												icon: "none",
											});
											setTimeout(function() {
												//清除本地登录状态
												// uni.clearStorage();
												//IM实例销毁
												// 清除本地cookie
												uni.removeStorage({key: 'cookie'});
												
												Vue.prototype.$NIM.disconnect();

												//跳转登录页
												uni.redirectTo({
													url: "/pages/login/wxlogin",
												});
											}, 2000);


										}
										break

									default:
										break;
								}
							}
						}
						// uni.setStorage({
						// 	key: "userInfo",
						// 	data: res.data.data,
						// 	success: function() {},
						// });
						// uni.setStorage({
						//   key: "sessionId",
						//   data: res.data.sessionId,
						//   success: function () {
						//     console.log("success");
						//   },
						// });

						uni.switchTab({
							url: "../index/index",
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						});


						uni.login({
							provider: "weixin",
							success: (loginRes) => {
								console.log(loginRes);
								this.loginRes = loginRes.code;
							},
							fail: () => {
								uni.showToast({
									title: "获取 code 失败",
									icon: "none",
								});
							},
						});

					}
				});
			},
			getPhoneNumber(e) {




				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.encryptedData = e.detail.encryptedData;
					this.iv = e.detail.iv;
					this.apiThirdLogin();
				}
			},
			getUserProfile() {
				let that = this;
				uni.getUserProfile({
					desc: "Wexin",
					success: (res) => {
						console.log(res);
						uni.showToast({
							icon: "none",
							title: "获取成功",
						});
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: "none",
							title: "用户拒绝获取",
						});
					},
				});
			},


			// 转发
			onShareAppMessage() {


			},



			// 获取授权
			wxGetUserInfo(e) {
				this.wxLoginShow = true
				// 推荐使用wx.getUserProfile获取用户信息，
				// 开发者每次通过该接口获取用户个人信息均需用户确认，
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗		

				return
				wx.getUserProfile({
					desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎啥填写
					success: (res) => {
						console.log(res.userInfo)
						this.sex = res.userInfo.gender
						this.wxLoginShow = true
					}
				})
			},

			// 防止恶意点击
			fangdou: function() {
				var nowTime = Math.round(new Date());
				console.log('距离上次点击', nowTime - this.tapTime, '毫秒')
				if (nowTime - this.tapTime < 600) {
					console.log('阻断')
					this.tapTime = nowTime
					return false;
				} else {
					this.tapTime = nowTime
					return true
					console.log('执行')
				}

			},

			// 防止恶意点击
			fangdous: function() {
				var nowTime = Math.round(new Date());
				console.log('距离上次点击', nowTime - this.tapTime, '毫秒')
				if (nowTime - this.tapTime < 300) {
					console.log('阻断')
					this.tapTimes = nowTime
					return false;
				} else {
					this.tapTimes = nowTime
					return true
					console.log('执行')
				}

			},






			// 进厅前请求 统一

			jttyqq: function(roomId) {




				var data = {
					url: "/web/v2/api/chatRoom/inChatRoom",
					methods: "post",
					data: {
						// apiVersion: "3.8",
						roomId: roomId,
						source: '78'
					},
				};
				this.$http(data).then((res) => {
					console.log(res, "房间房间房间房间房间房间房间房间房间");

					if (res.data.code == 21135) {
						//21135 被踢出房间					
						uni.showToast({
							title: '您已被踢出房间',
							icon: "none",
							duration: 2000,
						});

					} else if (res.data.code == 25044) {
						//25044 聊天室已关闭
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						});
						return
					} else if (res.data.code == 21000) {
						var rid = res.data.data.chatRoomInfo.channelId

						// 判断不是女神厅 或者直播
						if (res.data.data.chatRoomInfo.roomType == 27) {

						} else if (res.data.data.chatRoomInfo.roomType == 33) {

						} else {
							uni.showToast({
								title: '暂不支持该厅',
								icon: "none",
								duration: 2000,
							});

							return
						}


						var url = '/pages/subpage/chatRoomDetails/chatRoomDetails?roomId=' + roomId +
							'&channelId=' + rid

						uni.navigateTo({
							url: url,
						})

						return
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						});
						return
					}
				});

				// isPrivate 判断是否是个私密厅

				// } else {
				// 	uni.showToast({
				// 		title: "此聊天室是私密厅，暂时无法进入~",
				// 		icon: "none",
				// 		duration: 2000,
				// 	});
				// 	return
				// }
			},

			goPath(url, isPrivate, roomId) {
				var rs = this.fangdou()
				if (!rs) {
					return
				}
				var cookie = uni.getStorageSync("cookie")
				console.log('判断有无登录', cookie)
				if (!cookie) {
					uni.reLaunch({
						url: '../login/wxlogin'
					})
					return
				}
				// 等于2 的时候进入 搜索
				if (isPrivate == 18) {

					this.downApp()
					return
				}
				//跳转之前先走进厅接口，检查有没有进入权限
				console.log('请求')

				var that = this



				if (isPrivate != 1) {

					var currentTab = that.currentTab

					if (currentTab == 0) {
						var source = "73"
					} else if (currentTab == 1) {
						var source = "74"
					} else if (currentTab == 2) {
						var source = "74"
					} else if (currentTab == 3) {
						var source = "75"
					}



					var data = {
						url: "/web/v2/api/chatRoom/inChatRoom",
						methods: "post",
						data: {
							// apiVersion: "3.8",
							roomId: roomId,
							source: source,

						},
					};
					this.$http(data).then((res) => {
						console.log(res, "房间房间房间房间房间房间房间房间房间");

						if (res.data.code == 21135) {
							//21135 被踢出房间
							that.msg = res.data.msg;
							that.msgtype = true;

							setTimeout(function() {
								that.msgtype = false
							}, 2000);
						} else if (res.data.code == 25044) {
							//25044 聊天室已关闭
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000,
							});
							return
						} else if (res.data.code == 21000) {


							if (res.data.data.roomType == 33) {
								uni.navigateTo({
									url: url,
								});
								return

							} else if (res.data.data.roomType == 27) {
								uni.navigateTo({
									url: url,
								});
								return
							} else {
								uni.showToast({
									title: '暂不支持此类型厅',
									icon: "none",
									duration: 2000,
								});
								return

							}



						}
					});
				} else {
					uni.showToast({
						title: "此聊天室是私密厅，暂时无法进入~",
						icon: "none",
						duration: 2000,
					});
					return
				}
			},

			getSwiper(num) {

				var _this = this
				// 关注缺省
				_this.guanztb = false;
				// 推荐派对的缺省
				_this.tjpdtb = false;


				var data = {
					url: '/web/p1/chatroom/pagelist',
					methods: 'post',
					data: {
						apiVersion: "4.1",
						page: this.page,
						roomType: this.roomType
					}
				}

				_this.$http(data).then(res => {




					if (res.data.code == 0) {
						//  
						if (res.data.data.chatRoomSortList.length > 2) {
							// hasLiveRoom:1显示 2隐藏
							_this.banner = res.data.data.banner



							// 判断女神厅
							console.log(res.data.data.chatRoomList.length, "res.data.data.chatRoomList")
							//  
							if (_this.roomType == 999) {

								// 判断有无登录, 没有登录的话 返回数据清空展示推荐人


								var nei = uni.getStorageSync("nei")
								console.log('判断有无登录', nei)

								if (nei) {

								} else {
									_this.chatRoomList = []
									_this.guanztb = true
								}




								if (res.data.data.chatRoomList.length == undefined) {

									// _this.chatRoomList = []
									_this.guanztb = true


									console.log('关注内有')
									return
								}


								// 关注内有   ===1 或者2  待定
								if (res.data.data.isAttention) {

									console.log(_this.roomType, '关注的情况下')


									_this.chatRoomList = res.data.data.chatRoomList.filter(function(item) {
										return item.roomType == 27
									});
								} else {
									// 关注隐藏
									// _this.chatRoomList = []

								}
								console.log('this.chatRoomList', _this.chatRoomList)
							} else if (_this.roomType == 33) {
								_this.chatRoomList = res.data.data.chatRoomList


								//  

							} else {

								_this.chatRoomList = res.data.data.chatRoomList.filter(function(item) {
									return item.roomType == 27
								});

							}
							if (_this.page == 1 && _this.chatRoomList.length == 0 && _this.roomType == 999) {

								_this.guanztb = true
							}
							if (_this.page == 1 && _this.chatRoomList.length == 0) {

								_this.tjpdtb = true
							}
							if (res.data.data.chatRoomList.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
					}
					// 下拉刷新结束
					// uni.stopPullDownRefresh();
				})
			},
			swichMenu: async function(current) { //点击其中一个 menu

				var res = this.fangdous()

				if (!res) {
					return
				}


				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					// this.setScrollLeft(current);
					this.roomType = this.chatRoomSortList[current].roomType
					// this.chatRoomList = []

					this.page = 1
					this.getSwiper()

					// 调用埋点
					this.maidainsj()


				}
			}
		},

		// setScrollLeft: async function(tabIndex) {
		// 	let leftWidthSum = 1;

		// 	for (var i = 0; i <= tabIndex; i++) {
		// 		let nowElement = await this.getWidth('tabNum' + i);
		// 		leftWidthSum = leftWidthSum + nowElement.width;
		// 	}
		// 	let winWidth = uni.getSystemInfoSync().windowWidth;
		// 	this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
		// },
		// getWidth: function(id) {
		// 	//得到元素的宽高
		// 	console.log(id,'得到元素的宽高')

		// 	return new Promise((res, rej) => {
		// 		uni.createSelectorQuery().select("#" + id).fields({
		// 			size: true,
		// 			scrollOffset: true
		// 		}, (data) => {
		// 			res(data);
		// 		}).exec();
		// 	})
		// },
		loadMore: function(tabIndex) {
			console.log('下拉触底')
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page++
				this.getSwiper();
			}
		},
		getDateList: function(tabIndex) {
			for (var i = 0; i < 20; i++) {
				var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
				this.swiperDateList[tabIndex].push(entity);
			}
		},


	}
</script>

<style lang="scss" scoped>
	body {
		background: #fff
	}




	// 去掉圆角
	.content /deep/ .u-mode-center-box {
		background: none;
	}


	//  新人之旅领取礼物弹窗
	.xrbj {

		width: 650upx;
		background-size: 100% 100%;
		background-image: url(https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/bjdp.png);


		.title {
			width: 103%;

			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			// text-align: center;

			font-family: PingFangSC-Medium;
			font-size: 30upx;
			color: #DD6D00;
			// text-align: center;

		}

		.tishis {

			// border: 1upx solid red;
			font-family: PingFangSC-Medium;
			font-size: 28upx;
			color: #FFFFFF;
			width: 103%;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 36upx;


		}

		.jintian {


			display: flex;
			align-items: center;
			justify-content: center;
			height: 100upx;
		}


		.dijit {
			padding: 25upx 50upx;
			background-size: 100% 100%;
			background-image: url(https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/dyit.png);
			font-family: PingFangSC-Medium;
			font-size: 30upx;
			color: #FFFFFF;
		}

		.narionglw {
			width: 85%;
			// border: 2upx solid #000000;
			// height: 360upx;
		}

		.dvuy {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.liwu {
			margin-top: 5upx;

			height: 180upx;
			text-align: center;
			float: left;
		}

		.liwutu {
			width: 145upx;
			margin: 0 auto;
			background-size: 100% 100%;
			height: 123upx;
			background-image: url(https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/jianglisd.png);

		}

		.liwuname {
			font-family: PingFang-SC-Medium;
			font-size: 26upx;
			color: #FFFFFF;
		}


		.lingqu {
			// margin-top: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;


		}

		.lq {
			// 
			background-size: 100% 100%;
			padding: 10upx;
			color: #FFFFFF;
			width: 350upx;
			text-align: center;
			background-image: url(https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/lingquan.png);

			position: absolute;
			bottom: 35upx;


		}



	}






	.ccc /deep/ .u-mode-center-box {
		background: none;
	}



	.jianbian {

		border-radius: 0 0 10upx 10upx;
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		/* Safari 5.1 - 6 */
		background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		/* Opera 11.1 - 12*/
		background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		/* Firefox 3.6 - 15*/
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		/* 标准的语法 */

	}

	.iynst {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-Regular;
		font-size: 31upx;
		color: #9E9E9E;
		margin-top: 140upx;
	}

	.wwto {
		width: 68%;
		// border: 1px solid red;
		text-align: left;
		font-family: PingFangSC-Regular;
		font-size: 24upx;
		color: #3B3F63;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.icos {
		position: relative;
		z-index: 99;

	}

	.icoo {
		width: 35rpx;
		height: auto;
		position: absolute;
		right: 10px;
		top: 8px;


	}


	.tamz {
		text-align: left;
		font-family: PingFangSC-Medium;
		font-size: 28upx;
		color: #3B3F63;

	}


	.texhe {
		font-family: PingFangSC-Medium;
		font-size: 36upx;
		color: #333333;

	}

	.shuaxin {
		width: 100upx;
		font-size: 20upx;
		padding: 15upx;
		border: 1upx solid #000000;
		text-align: center;
		z-index: 999;

		position: absolute;
		bottom: 50upx;
		right: 18upx;

		color: #000000;


	}



	.tan {
		position: fixed;
		z-index: 999;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
		max-width: 80%;
	}

	.chuang {
		display: inline-block;
		vertical-align: middle;
		color: #fff;
		background-color: rgba(17, 17, 17, .7);
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 13px;
		text-align: center;
		max-width: 100%;
		word-break: break-all;
		// white-space: normal;
	}


	.mainBox {
		width: 90%;
		/* height: 86upx; */
		background: #fff;
		margin: 0 5%
	}

	.menuBox li {
		height: 86upx;
		line-height: 86upx;
		text-align: center;
		font-size: 27upx;
		color: #222;
		background: #fff;
		cursor: pointer
	}

	.menuBox li.on {
		color: #ff8f8f;
		border-bottom: 4upx solid #ff8f8f
	}

	.content {
		width: 100%
	}

	.content>div {
		width: 100%;
		height: 100%;
		color: #000
	}

	.text {
		width: 200px;
		color: #007971;
		text-align: center
	}

	.chatRoombanner img {
		width: 750upx;
		height: 186upx
	}

	.bannerBox {
		width: 100%;
		height: 260upx;
		padding: 10upx 0
	}

	.bannerBox {
		border-radius: 14upx
	}

	.roomList {
		overflow: hidden;
		margin-bottom: 120upx
	}

	.roomListUl {
		overflow: hidden;
		margin: 0 20upx;
	}

	.roomListUl li {
		width: 330upx;
		height: 330upx;
		float: left;
		margin-top: 15upx;
		position: relative;
		margin: 0 auto;
		margin-top: 20upx;
	}

	.roomListUl .img {
		width: 330upx;
		height: 330upx;
		border-radius: 14upx;
		margin: 0 auto;
	}

	.greenBox {
		display: inline-block;
		padding: 0 10upx;
		border-radius: 14upx;
		font-size: 19upx;
		height: 26upx;
		line-height: 26upx;
	}

	.footerFixed {
		position: fixed;
		color: #fff;
		font-weight: 700;
		font-size: 40upx;
		bottom: 20upx;
		left: 50%;
		width: 710upx;
		height: 98upx;
		text-align: center;
		line-height: 98upx;
		background: -webkit-linear-gradient(left bottom, #ff0b54, #ff6761);
		background: -o-linear-gradient(left bottom, #ff0b54, #ff6761);
		background: -moz-linear-gradient(left bottom, #ff0b54, #ff6761);
		background: -mos-linear-gradient(left bottom, #ff0b54, #ff6761);
		background: linear-gradient(left bottom, #ff0b54, #ff6761);
		border-radius: 14upx;
		z-index: 999;
		margin-left: -355upx;
		opacity: .9
	}

	.zxrs {
		line-height: 26upx;
		display: inline-block;
		color: #fff;
		font-size: 20upx;
		top: 20upx;
		left: 12upx;
		height: 24upx;
		padding: 5upx 20upx;
		background: rgba(0, 0, 0, .5);
		border-radius: 20upx;
		border: 1px solid #FFFFFF;
	}

	.greenR {
		display: inline-block;
		width: 12upx;
		height: 12upx;
		background: #31d84d;
		border-radius: 50%;
		vertical-align: 1upx;
		margin-right: 12upx
	}

	.roomId {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		color: #fff;
		font-size: 20upx;
		bottom: 0;
		background: linear-gradient(top, rgba(255, 255, 255, 0) 80%, rgba(197, 197, 197, 1) 100%);
		border-radius: 14upx
	}

	.zshb {
		display: inline-block;
		color: #fff;
		font-size: .12upx;
		top: 0;
		right: 0;
		height: 32upx;
		width: 120upx;
		/* background: rgba(0, 0, 0, .5) url(../img/zshb.png); */
		background-size: cover;
		border-radius: 14upx
	}

	.pa {
		position: absolute;
		z-index: 1;
	}

	.content {
		height: 100%;
		overflow: hidden;
	}

	.btn {
		width: 40upx;
		height: 40upx;
		margin-left: 20upx;
	}

	.header {
		display: flex;
		align-items: center;
		top: 0;
		position: fixed;
		width: 100%;
		z-index: 100;
		left: 0;
		background: #FFFFFF;
	}

	.header .header-title {
		position: absolute;
		transform: translateX(-50%);
		left: 50%;
		font-size: 30upx;
	}

	.header-back {
		position: absolute;
		left: 15upx;
		font-size: 30upx;
		padding: 10upx;
		border-radius: 50%;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.body-view {
		// display: flex;
		// flex: 1;
		// flex-direction: column;
		// overflow: hidden;
		height: 100%;
		width: 100%;
		// align-items: flex-start;
		// justify-content: center;
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 112upx;
		/* 在这里设置导航条高度 */
	}

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		height: 100%;
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		margin-left: 25upx;
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(154, 154, 154, 1);
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		margin-left: 25upx;
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 40upx;
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		line-height: 40upx;
	}

	// .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
	// 	position: absolute;
	// 	bottom: 0;
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: center;
	// }

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
		background: rgba(0, 170, 255, 1);
	}

	.swiper-box-list {
		width: 100%;
		height: 83%;
		background-color: #FFFFFF;
	}

	.swiper-one-list {
		height: 100%;
		width: 100%;
	}

	.swiper-one-list .swiper-list-entity {
		width: 100%;
		height: 112upx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}


	.content /deep/ .u-drawer-bottom {
		background: none;
	}

	.content {
		.wxPop {
			font-size: 36upx;
			color: #ffffff;

			.li {
				margin: 0 auto;
				width: 504upx;
				height: 104upx;
				border-radius: 52upx;
				line-height: 104upx;
				text-align: center;
				margin-bottom: 26upx;
				background-image: linear-gradient(to right, #aea2ff, #7077ff);
			}
		}

		button::after {
			border: none;
			background: none;
		}

		button {
			border-radius: 52upx;
			height: 104upx;
			line-height: 104upx;
			background-image: linear-gradient(to right, #86d67f, #2cbd87);
			width: 100%;
			margin: 0 auto;
			padding: 0;
			font-size: 36upx;
			color: #ffffff;
			text-align: center;
		}

		.btn-hover {
			background-color: transparent;
		}

		.annius {
			width: 450upx;
			line-height: 100upx;
			margin: 0 auto;
			text-align: center;
			color: #FFFFFF;
			background-image: linear-gradient(-44deg, #7078FF 0%, #B1A4FF 100%, #B1A4FF 100%);
			box-shadow: 0 8px 9px 0 rgba(255, 255, 255, 0.72), 0 14px 9px 0 #DEF2FF, inset 0 0 9px 4px rgba(250, 230, 255, 0.16);
			border-radius: 52.5px;
			border-radius: 52.5px;
		}

		.anniuh {
			width: 450upx;

			line-height: 100upx;
			margin: 0 auto;
			text-align: center;
			color: #FFFFFF;
			// background-image: linear-gradient(-44deg, #7078FF 0%, #B1A4FF 100%, #B1A4FF 100%);
			background: #DCDEE0;
			box-shadow: 0 8px 9px 0 rgba(255, 255, 255, 0.72), 0 14px 9px 0 #DEF2FF, inset 0 0 9px 4px rgba(250, 230, 255, 0.16);
			border-radius: 52.5px;
			border-radius: 52.5px;
		}



	}
</style>
